<template>
  <div>
    <div class="dv3">
      <van-icon name="fire-o"/>
    </div>
    <div>
      <van-row align="center">
        <van-col span="4">
          <van-image
              round
              width="3rem"
              height="3rem"
              src="https://img0.baidu.com/it/u=3722752191,690244527&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          />
        </van-col>
        <van-col span="12" class="c1">
          <van-cell-group inset>
            <van-field v-model="user.name">
              {{ user.name }}
            </van-field>
            <van-field v-model="user.phone">
              {{ user.phone }}
            </van-field>
          </van-cell-group>
        </van-col>
        <van-col span="8">签到领积分</van-col>
      </van-row>
    </div>
    <div>
      <van-row align="center">
        <van-col span="8" v-model="user.coupon">
          <div> {{ user.coupon }}</div>
          <div class="c2"><small>优惠券</small></div>
        </van-col>
        <van-col span="8" v-model="user.integral">
          <div> {{ user.integral }}</div>
          <div class="c2"><small>积分</small></div>
        </van-col>
        <van-col span="8" v-model="user.balance">
          <div> {{ user.balance }}</div>
          <div class="c2"><small>余额·充值(元)</small></div>
        </van-col>
      </van-row>
    </div>
    <div align="center">
      <van-row class="c3" align="center">
        <van-col span="4" class="c4">
          <van-icon name="gem-o"/>
        </van-col>
        <van-col span="14" class="c5">开通绿卡会员买菜必涨价</van-col>
        <van-col span="6" class="c6" style="width: 3px">立即开通</van-col>
      </van-row>
    </div>
    <div>
      <div class="dv1" v-for="q in questions">
        <van-row align="center">
          <div>
            <label class="c7">我的订单</label>
          </div>
          <div class="dv2">
            <van-button @click="tz()">查看全部订单 ></van-button>
          </div>
        </van-row>
        <div>
          <van-grid>
            <van-grid-item icon="wap-home-o" to="/home" text="收货地址"/>
            <van-grid-item icon="envelop-o" to="/home" text="待收货"/>
            <van-grid-item icon="good-job-o" to="/home" text="待评价"/>
            <van-grid-item icon="balance-pay" to="/home" text="退款"/>
          </van-grid>
        </div>
      </div>
      <div class="dv1" v-for="q in questions">
        <div>
          <van-grid>
            <van-grid-item icon="gem-o" to="/home" text="绿卡会员"/>
            <van-grid-item icon="like-o" to="/home" text="收藏"/>
            <van-grid-item icon="cart-o" to="/home" text="待支付"/>
            <van-grid-item icon="friends-o" to="/home" text="客服与帮助"/>
          </van-grid>
        </div>
      </div>
      <div>
        <van-button type="danger" @click="tc()">退出账号</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "MyView",
  mounted() {
    this.axios.get('/my/loginMyUser.do').then((r) => {
      if (r.data.code == 200) {
        this.user = r.data.data;
      } else {
        alert()
      }
    })
  },
  data() {
    return {
      user: {
        // imgurl: ""
        name: "",
        phone: "",
        coupon: "",
        integral: "",
        balance: ""
      },
      questions: [
        {}
      ]
    }
  },
  methods: {
    tz() {
      this.$router.push("/order")
    },
    tc(){
      axios({
        url:'/user/logout.do',
        method:"get",
        headers:{
          'ddstoken':this.$store.state.token
        }
      }).then(r=>{
        if(r.data.code === 200){
          this.$toast("退出成功")
          this.$router.push('/login')
        }else{
          this.$toast("退出失败")
        }

      })
    }
  }
}
</script>

<style scoped>
.c1 {
  margin-bottom: 0px;
}

.c2 {
  margin-top: 6px;
  font-size: 6px;
  flood-color: lightgray;
}

.c3 {
  margin-top: 35px;
  width: 95%;
  height: 45px;
  background-color: green;
  border-radius: 8px;
}

.c4 {
  color: gold;
}

.c5 {
  color: azure;
}

.c6 {
  border-radius: 20px;
  height: 22px;
  background-color: gold;
}

.c7 {
  margin-left: 20px;
}

.dv1 {
  background-color: ghostwhite;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  box-shadow: 5px 5px 3px gainsboro;
  border-radius: 20px;
  margin-bottom: 10px;
}

.dv2 {
  margin-left: 120px;
}

.dv3 {
  margin-left: 300px;
  margin-top: 10px;
}

</style>